<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>办事预约-条件检索</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../css/app.css">		
	</head>
	<style type="text/css">
        body{overflow:auto; background-color: #EFEFEF;}
        .mui-content,.mui-table-view{background-color: #EFEFEF;}
        .mui-segmented-control{text-align: center;}  
/*		.mui-control-content{min-height: 500px;}*/
		.mui-control-content .mui-loading{margin-top: 50px;}
		.mui-slider-indicator.mui-segmented-control{text-align: center; background-color: #fff; margin: auto; /*padding: 0 1.5rem;*/ box-sizing: border-box;}
		.mui-segmented-control .mui-control-item{float:left;width: 2.2rem; color: #999; margin: auto; padding: .1rem 0; font-size: .3rem; box-sizing: border-box;}
        .mui-segmented-control:first-child{padding-left: .4rem;}
        .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar{width: 2.2rem; margin-left: .4rem;margin-top: -2px;}
        .list_box{ /*border: 1px solid #cbcbcb;*/  background-color: #fff; text-align: center;display:inline-block;margin:0 .1rem .1rem .1rem;}
        .mui-table-view .list_box:nth-of-type(2n){margin-left: .4rem;}
        .midden{color: #333; background-color: #fff; font-size:.3rem; width: 3.33rem; height: 1.05rem;display:table-cell;vertical-align:middle;box-sizing:border-box;padding:0 .3rem;}
        .mui-table-view{padding: .25rem .35rem;}
        .mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{border: none;}
        .list_box img{display:inline-block;width:.5rem!important; height: .5rem; vertical-align: middle;/*margin: .03rem .03rem 0 0;*/float: left;margin-left: 0.4rem;margin-top: 0.3rem;}
        .table_view{padding:0 .2rem;}
        .mui-slider-indicator.mui-segmented-control{box-shadow:20px -18px 20px 8px #fff;} 
        .mui-table-view .list_box{ box-shadow: 0 0.05rem 0.1rem rgba(0,0,0,.1);} 
        .mui-scroll-wrapper{overflow: scroll;}  
        .mui-table-view .list_box{width: 3.1rem; height: 1.05rem; line-height:1.13rem; /*border: 1px solid #cbcbcb;*/  background-color: #fff; text-align: center; display: inline-block; margin-bottom: .3rem;}
        .mui-table-view .list_box:nth-of-type(2n){margin-left: .3rem;}
        .mui-table-view .list_box>a{color: #333; background-color: #fff; font-size:.3rem}
        .mui-table-view{padding: .25rem .3rem;}      
	</style>
	<body>
		<!-- 头部end -->	
		<!-- 主体start -->		
		<div class="mui-content">
             <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1mobile">部门办事</a>
					<a class="mui-control-item" href="#item2mobile">个人办事</a>
					<a class="mui-control-item" href="#item3mobile">法人办事</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group" id='app'>
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="table_view">
									<li id="" type="org" class="list_box" title="全部"><span class="midden">全部</span></li><template v-for="org in orgList">
										<li :id="org.oid" :title="org.name" type="org" class="list_box"><span class="midden">{{org.name}}</span></li>
									</template>
								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">																
								<ul class="mui-table-view">
									<li id="" type="grtheme" class="list_box" title="全部"><a><img src="../../../images/theme/qb.png">全部</a></li><template v-for="grtheme in grfwztList">
										<li :id="grtheme.oid" :title="grtheme.name" type="grtheme" class="list_box">
											<a>
												<img :src="'../../../images/theme/gr/' + grtheme.code + '.png'">
												{{grtheme.name}}
											</a>
										</li>	
									</template>
								</ul>
							</div>
						</div>

					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div id="scroll3" class="mui-scroll-wrapper">
							<div class="mui-scroll">																
								<ul class="mui-table-view">
									<li id="" type="frtheme" class="list_box" title="全部"><a><img src="../../../images/theme/qb.png">全部</a></li><template v-for="frtheme in frfwztList">
										<li :id="frtheme.oid" :title="frtheme.name" type="frtheme" class="list_box">
											<a>
												<img :src="'../../../images/theme/fr/' + frtheme.code + '.png'">
												{{frtheme.name}}
											</a>
										</li>	
									</template>
								</ul>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
		<!-- 主体end -->
	</body>
	<script>
		function my_immersed(immersed){
			
		}
	</script>
	<script src="../../../js/immersed.js"></script>
	<script src="../../../js/mui.min.js"></script><!-- mui -->
	<script src="../../../js/common.js"></script>
	<script src="../../../js/jquery2.2.4.min.js"></script>	<!-- jquery -->
	<script src="../../../js/app.js"></script>
	<script src="../../../js/vue.min.js"></script>
		<script>
			mui.init({
				swipeBack: false
			});
			mui.plusReady(function() {
				var districtId = getCurrentDistrictId();
				loadData(districtId);
			});
			
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
				});
			})(mui);
			
			var mv = new Vue({
				el:'#app',
				data:{
					orgList:[],
					grfwztList:[],
					frfwztList:[]
				}
			});
		
		/**
		 * 加载数据
		 * @param {Object} districtId 区划主键
		 */
		function loadData(districtId){
		    utils.showWaiting();
			var param = 'districtId=' + districtId;
			var url = 'appHttpService/appThemeAndOrg.do';
			utils.ajax(url, function(data) {
					data = JSON.parse(data);
					if(data.code == 0) {
						var orgList = JSON.parse(data.orgList);
						var grfwztList = JSON.parse(data.grfwztList);
						var frfwztList = JSON.parse(data.frfwztList);
						
						mv.orgList = orgList;	
						mv.grfwztList = grfwztList;	
						mv.frfwztList = frfwztList;	
						
						var Height=$(window).height()-($("#sliderSegmentedControl").height() + $(".mui-bar-nav").height() + 10);
						$(".mui-control-content").height(Height);
						$(window).resize(function(){
							var Height=$(window).height()-($("#sliderSegmentedControl").height()+$(".mui-bar-nav").height()+10)
							$(".mui-control-content").height(Height)
						})	
					}
					closeWaitingAndShowView(); 
				}, param);
		}
			
		/**
         * 点击查询
         */
		mui("body").on('tap','.mui-scroll li',function(){
			var districtId = getCurrentDistrictId();
			var id = this.getAttribute('id');
			var type = this.getAttribute('type');
			var title = this.getAttribute('title');
			var url = '_www/src/work/onlinebook/service_list.html';
			if(!id||id==''){
				url += '?districtId=' + districtId;
			}else if(type == 'org'){
				url += '?orgId=' + id +'&districtId=' + districtId;
			}else{
				url += '?themeId=' + id +'&districtId=' + districtId;
			}
			showTemplates('service_list.html',title,url);
        })
				
		</script>
	
</html>
